<template>
<!-- 平台访问量 -->
    <div class="traffic-wrap">
        <div class="model-title">平台访问量</div>
        <div class="traffic-result-wrap">
            <div class="num-show">
                <!-- <p class="num-value">{{ total }}</p> -->
                <number-scroll class="num-value" :time="1" :value="total"></number-scroll>
                <p class="num-info">
                    <span class="add-num-tips">+{{ addNewNum }}</span>
                    <span class="num-unit">人次</span>
                </p>
            </div>
        </div>
    </div>
</template>
<script>
import NumberScroll from '@/libs/NumberScroll/Main'
import { getPlatformVisits } from '@/api/platMonitor'

export default {
    name: 'Traffic',
    components: {
        NumberScroll
    },
    data() {
        return {
            addNewNum: 0,
            total: 0
        }
    },
    created() {
        this.getData()
    },
    methods: {
        getData() {
            let that = this
            let parames = {
                dateType: 1,
                applyType: 0
            }
            getPlatformVisits(parames).then(res => {
                if(res.status === 200) {
                    that.total = res.data.count || 0
                    that.addNewNum = res.data.dayCount || 0
                }
            })
        }
    }
}
</script>
<style lang="scss">
.traffic-wrap {
    .traffic-result-wrap {
        margin-top: 25px;
        background: url(../../../../../assets/images/detailPage/plat-form-btn.gif) 95% center no-repeat;
        background-size: contain;
        .num-show {
            display: flex;
            align-items: center;
            margin-top: 15px;
            height: 150px;
            background-size: contain;
            background: url(../../../../../assets/images/detailPage/traffic-num-bg.png) 0 0 no-repeat;
            .num-value {
                width: 47%;
                text-align: right;
                font-family: 'DigitaldreamFat';
                font-size: 58px;
                font-weight: bold;
                color: rgba(82,219,241,1);
                line-height: 100px;
            }
            .num-info {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                height: 100px;
                margin-left: 40px;
                padding-bottom: 8px;
                text-align: center;
                .add-num-tips {
                    border-radius: 19px;
                    height: 26px;
                    line-height: 26px;
                    color: #fff;
                    padding: 0 10px;
                    font-size: 18px;
                    background-color: #CE334F;
                }
                .num-unit {
                    font-size: 20px;
                    color: rgba(104,169,255,1);
                    opacity: 0.5;
                }
            }
        }
    }
}
</style>